<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
</head>
<body>
    <p>距离6月30日凌晨0点0分0秒还有：天小时分秒</p>

    <script>
        /* 
            思路：
                假设一个未来时间，定时器与当前时间的时差，转化，渲染
        */
        
        var p =document.getElementsByTagName('p')[0];

        // 固定终点时间
        var futTime = new Date('2020-06-30 00:00:00');

        // 封装
        function now(){
            // 当前时间
            var curTime = new Date();
            // 时差
            var jetLag = futTime - curTime;
            // 转化天时分秒
            var day = parseInt(jetLag/1000/60/60/24);
            var hour = parseInt((jetLag/1000/60/60)%24);
            var minute = parseInt((jetLag/1000/60)%60);
            var second = parseInt((jetLag/1000)%60);

            p.innerHTML = '距离6月30日凌晨0点0分0秒还有：'+day+'天'+hour+'小时'+minute+'分'+second+'秒';
        }
        now();
        
        // 定时器
        setInterval(function(){
            now();
        },1000);

    </script>
</body>
</html>